<template>
	<div class="dict_show_config">
		<div class="dict_config_handle">
			<el-select v-model="configData.type" placeholder="请选择显示类型">
				<el-option v-for="(item, index) in dictConfigType" :key="index" :label="item.label" :value="item.type" />
			</el-select>
			<el-button type="text" icon="el-icon-plus" v-if="isExistOption" @click="handleAddedOption()">添加选项</el-button>
		</div>
		<div class="dict_config_content">
			<el-descriptions class="switch" :column="2" border v-if="configData.type === '2'">
				<el-descriptions-item label="开启"><el-input v-model="configData.active"></el-input></el-descriptions-item>
				<el-descriptions-item label="关闭"><el-input v-model="configData.inactive"></el-input></el-descriptions-item>
			</el-descriptions>
			<el-table class="option" :show-header="false" :data="configData.options" border v-if="configData.type === '4'">
				<el-table-column>
					<template slot-scope="{ row }"><el-input v-model="row.label"></el-input></template>
				</el-table-column>
				<el-table-column>
					<template slot-scope="{ row }"><el-input v-model="row.img"></el-input></template>
				</el-table-column>
				<el-table-column>
					<template slot-scope="{ row, $index }">
						<el-button type="text" @click="handleDelOption(index)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<div class="switch"></div>
		<div class="radio"></div>
		<div class="radio_img"></div>
		<div class="checkbox"></div>
		<div class="radio_img"></div>
		<div class="radio_img"></div>
		<div class="radio_img"></div>
		<div class="dict_config_describe">
			<el-input v-bind="textareaConfig" v-model="configData.describe" />
		</div>
	</div>
</template>

<script>
import emitter from 'element-ui/src/mixins/emitter';
export default {
	mixins: [emitter],
	props: {
		value: { type: String, default: '' }
	},
	data() {
		return {
			configData: {},
			dictConfig: this.value,
			textareaConfig: {
				resize: 'none',
				type: 'textarea',
				placeholder: '请输入配置描述',
				autosize: { minRows: 1, maxRows: 4 }
			}
		};
	},
	computed: {
		isExistOption() {
			return ['3', '4', '5'].includes(this.configData.type);
		}
	},
	watch: {
		value(val) {
			this.dictConfig = val;
		},
		dictConfig(val) {
			this.$emit('input', val);
			this.dispatch('ElFormItem', 'el.form.change', [val]);
		},
		configData: {
			handler(data) {
				console.log(data);
			},
			deep: true
		}
	},
	mounted() {
		if (this.value && this.value.isJSON()) {
			this.configData = JSON.parse(this.value);
		}
	},
	methods: {
		handleAddedOption() {
			console.log(this.configData);
		}
	}
};
</script>

<style lang="scss" scoped>
.dict_config_handle {
	display: flex;
	align-items: center;
	margin-bottom: 12px;
	.el-select {
		flex: 1;
		overflow: hidden;
	}
	.el-button {
		flex-shrink: 0;
		margin-left: 10px;
	}
}
.dict_config_content {
	margin-bottom: 12px;
	.el-descriptions.switch {
		&:deep(.el-descriptions-item__label) {
			width: 50px;
			padding: 10px;
			line-height: 1;
			text-align: center;
		}
		&:deep(.el-descriptions-item__content) {
			padding: 0;
		}
		&:deep(.el-input__inner) {
			border: none;
		}
	}
}
.dict_config_describe {
	&:deep(.el-textarea__inner) {
		padding: 7px 15px 6px;
	}
}
</style>
